<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>Magnet Demo</title>
    <style>
      body {
        margin: 0;
      }
      * { font-size: 3vmin; }
      #lines, #paper {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
      #paper {
        display: flex;
        flex-flow: column;
      }
      #tool {
        padding: 1vmin;
        background-color: #eee;
        font-family: monospace;
        line-height: 150%;
      }
      #container {
        flex: 2 2;
      }
      .item { white-space: nowrap; }
      input, button {
        outline: none;
        border: .1vmin solid #666;
        font-family: monospace;
        color: #333;
      }
      input[type=checkbox] {
        width: 3vmin;
        height: 3vmin;
      }
      button { background-color: #eee; }
      button:active { transform: translate(.1vmin, .1vmin); }
      #lines {
        z-index: 1;
        pointer-events: none;
      }
      #lines >* {
        position: absolute;
        width: 1px;
        height: 1px;
        background-color: #999;
        opacity: 0;
      }
      #lines >.show { opacity: .5; }
      #lines .vert {
        transform: translateX(-50%);
        height: 100%;
      }
      #lines .hori {
        transform: translateY(-50%);
        width: 100%;
      }
      .block {
        position: absolute;
        overflow: auto;
      }
      .block input {
        position: absolute;
        top: 0;
        right: 0;
      }
    </style>
    <script src="../magnet.min.js"></script>
    <script>
      const magnet = new Magnet();

      magnet.distance(15);
      magnet.attractable(true);
      magnet.allowCtrlKey(true);

      window.addEventListener('load', () => {
        let domContainer = document.getElementById('container');
        let domMask = document.getElementById('lines');
        let domHoriMagnet = domMask.querySelector('.hori');
        let domVertMagnet = domMask.querySelector('.vert');

        // start/end of magnet attract status
        magnet.on('start change end', ({ type }) => {
          console.log(`magnet${type}`);
        }).on('end', () => {
          domHoriMagnet.classList.remove('show');
          domVertMagnet.classList.remove('show');
        }).on('change', (e) => {
          // show/hide horizon/vertical edge line
          let result = e.detail;
          let resultX = result.x;
          let resultY = result.y;
          if (resultX) {
            domVertMagnet.style.left = (resultX.position+'px');
            domVertMagnet.classList.add('show');
          } else {
            domVertMagnet.classList.remove('show');
          }
          if (resultY) {
            domHoriMagnet.style.top = (resultY.position+'px');
            domHoriMagnet.classList.add('show');
          } else {
            domHoriMagnet.classList.remove('show');
          }
        });

        // generate block
        function genBlock() {
          let rootWidth = window.innerWidth;
          let rootHeight = window.innerHeight;
          let width = Math.max(30, parseInt(Math.random()*rootWidth/2));
          let height = Math.max(30, parseInt(Math.random()*rootHeight/2));
          let block = document.createElement('span');
          let checkbox = document.createElement('input');
          block.style.width = `${width}px`;
          block.style.height = `${height}px`;
          block.style.top = `${parseInt(Math.random()*(rootHeight-height))}px`;
          block.style.left = `${parseInt(Math.random()*(rootWidth-width))}px`;
          block.style.backgroundColor = `rgba(${[0, 0, 0].map(() => parseInt(100+Math.random()*155)).concat(.25+(.75*Math.random())).join(', ')})`;
          block.classList.add('block');

          checkbox.setAttribute('type', 'checkbox');
          checkbox.setAttribute('checked', '');
          checkbox.addEventListener('touchstart', (evt) => evt.stopPropagation());
          checkbox.addEventListener('mousedown', (evt) => evt.stopPropagation());
          checkbox.addEventListener('change', function() {
            let block = this.parentNode;
            if (this.checked) {
              block.style.resize = 'none';
              magnet.add(block);
            } else {
              block.style.resize = 'both';
              magnet.remove(block);
            }
          });
          block.addEventListener('mousedown', function(e) {
            this.style.zIndex = 10;
          });
          block.addEventListener('click', function() {
            this.style.zIndex = 1;
            this.parentElement.appendChild(this);
          });
          block.addEventListener('dblclick', function() {
            let checkbox = this.querySelector('input[type=checkbox]');
            checkbox.checked = !checkbox.checked;
            if (checkbox.checked) {
              magnet.add(this);
            } else {
              magnet.remove(this);
            }
          });
          ['attract', 'unattract', 'attracted', 'unattracted'].forEach((type) => {
            block.addEventListener(type, function(e) {
              console.log(e.type, e);
            });
          });

          block.appendChild(checkbox);
          domContainer.appendChild(block);
          return block;
        }
        
        // distance
        document.getElementById('dist').onchange = () => magnet.setDistance(this.value);
        magnet.setDistance(document.getElementById('dist').value = magnet.getDistance());

        // add one block
        document.getElementById('add').onclick = () => magnet.add(genBlock());

        // enable/disable fix edge
        document.getElementById('fix').onchange = function() {
          magnet.setStayInParent(this.checked);
        };
        document.getElementById('fix').checked = magnet.getStayInParent();

        // enable/disable align parent middle
        document.getElementById('parentMiddle').onchange = function() {
          magnet.setAlignParentCenter(this.checked);
        };
        document.getElementById('parentMiddle').checked = magnet.getAlignParentCenter();

        // enable/disable align outside
        document.getElementById('outside').onchange = function() {
          magnet.setAlignOuter(this.checked);
        };
        document.getElementById('outside').checked = magnet.getAlignOuter();

        // enable/disable align inside
        document.getElementById('inside').onchange = function() {
          magnet.setAlignInner(this.checked);
        };
        document.getElementById('inside').checked = magnet.getAlignInner();

        // enable/disable align middle
        document.getElementById('middle').onchange = function() {
          magnet.setAlignCenter(this.checked);
        };
        document.getElementById('middle').checked = magnet.getAlignCenter();

        // init blocks
        for (let bInx=(2+parseInt(Math.random()*3)); 0<bInx; bInx--) {
          magnet.add(genBlock());
        }

        magnet.setUseRelativeUnit(true);
      });
    </script>
  </head>
  <body>
    <div id="lines">
      <span class="vert"></span>
      <span class="hori"></span>
    </div>
    <div id="paper">
      <span id="tool">
        <span class="item">Distance: <input id="dist" type="number" min="0" max="20" /></span>
        <button id="add">Add Block</button>
        <span class="item"><input id="fix" type="checkbox" /><label for="fix">Fix edge</label></span>
        <span class="item"><input id="parentMiddle" type="checkbox" /><label for="parentMiddle">Align Parent Middle</label></span>
        <span class="item"><input id="outside" type="checkbox" /><label for="outside">Align Outside</label></span>
        <span class="item"><input id="inside" type="checkbox" /><label for="inside">Align Inside</label></span>
        <span class="item"><input id="middle" type="checkbox" /><label for="middle">Align Middle</label></span>
      </span>
      <div id="container"></div>
    </div>
  </body>
</html>